<template>
   <div class="content">
       <div class="box-blog" style="position: relative">
           <div class="img-head">
               <el-carousel :interval="5000" arrow="always">
                   <el-carousel-item >

                       <img src="../../assets/img/lun1.png" height="400" width="1200"/></el-carousel-item>
                   <el-carousel-item >

                       <img src="../../assets/img/lun2.jpg" height="400" width="1200"/></el-carousel-item>
                   <el-carousel-item >

                       <img src="../../assets/img/lun3.png" height="400" width="1200"/></el-carousel-item>
               </el-carousel>

           </div>
           <div style="display: inline-block; position: relative" class="body">
               <h1>
                   推荐博客
               </h1>
               <div class="body-inner">
                    <div class="blog" v-for="item in blog" style="position: relative">
                        <a   @click="lookBlog(item.id)"  style="cursor: pointer; display: inline-block; position: absolute; top: 10px; left: 59px;">{{item.title}}</a>
                        <img :src="item.imgUrl" height="30" width="30" style="border-radius: 50%; display: inline-block; margin-top: 10px;" />
                        <span style="display: inline-block; position: absolute; left: 60px; top: 40px; width: 400px; "> {{item.text.toString().slice(0, 50)}}</span>
                        <span class="ho" style="display: inline-block; color: #3a8ee6; margin-left: 20px; position: absolute; bottom: 0px; right: 80px;"><img src="../../assets/img/eye.png" height="16" width="16"/><span style="display: inline-block; margin-left: 2px; color: #3a8ee6">{{item.browseNum}}</span></span>
                        <span class="ho" style="display: inline-block; color: #3a8ee6; margin-left: 20px; position: absolute; bottom: 0px; right: 20px;"><span class="el-icon-star-off" style="display: inline-block"></span><span style="display: inline-block; margin-left: 2px; color: #3a8ee6">{{item.upNum}}</span></span>
                    </div>
               </div>
           </div>
           <div style="display: inline-block; position: relative; top: -135px; margin-left: 20px; background: #fff; width: 500px; padding: 20px; border-radius: 10px" >
               <div>
                   <el-tabs v-model="activeName" @tab-click="handleClick">
                       <el-tab-pane label="算法" name="first">
                           <div>
                               <div class="up-blog" v-for="o in 10">
                                   <img src="../../assets/img/head2.png" height="50" width="50" style="border-radius: 50%; display: inline-block" />
                                   <div class="author">
                                       <a href="">洋洋算法呀！</a>
                                       <img src="../../assets/img/vipNew.png" height="40" width="36"/>
                                       <img src="../../assets/img/expertNew.png" height="40" width="36"/>
                                       <div class="zan">
                                           获得2999赞
                                       </div>
                                   </div>
                                   <div class="zhibiao">
                                        <span class="el-icon-top"></span>
                                       <span>499'</span>
                                       <p>综合指标</p>
                                   </div>
                               </div>
                           </div>
                       </el-tab-pane>
                       <el-tab-pane label="数据结构" name="second">
                           <div>
                               <div class="up-blog" v-for="o in 10">
                                   <img src="../../assets/img/head2.png" height="50" width="50" style="border-radius: 50%; display: inline-block" />
                                   <div class="author">
                                       <a href="">洋洋数据结构呀！</a>
                                       <img src="../../assets/img/vipNew.png" height="40" width="36"/>
                                       <img src="../../assets/img/expertNew.png" height="40" width="36"/>
                                       <div class="zan">
                                           获得2999赞
                                       </div>
                                   </div>
                                   <div class="zhibiao">
                                       <span class="el-icon-top"></span>
                                       <span>499'</span>
                                       <p>综合指标</p>
                                   </div>
                               </div>
                           </div>
                       </el-tab-pane>
                       <el-tab-pane label="前端" name="third">
                           <div>
                               <div class="up-blog" v-for="o in 10">
                                   <img src="../../assets/img/head2.png" height="50" width="50" style="border-radius: 50%; display: inline-block" />
                                   <div class="author">
                                       <a href="">洋洋前端呀！</a>
                                       <img src="../../assets/img/vipNew.png" height="40" width="36"/>
                                       <img src="../../assets/img/expertNew.png" height="40" width="36"/>
                                       <div class="zan">
                                           获得2999赞
                                       </div>
                                   </div>
                                   <div class="zhibiao">
                                       <span class="el-icon-top"></span>
                                       <span>499'</span>
                                       <p>综合指标</p>
                                   </div>
                               </div>
                           </div>
                       </el-tab-pane>
                       <el-tab-pane label="后端" name="fourth">
                           <div>
                               <div class="up-blog" v-for="o in 10">
                                   <img src="../../assets/img/head2.png" height="50" width="50" style="border-radius: 50%; display: inline-block" />
                                   <div class="author">
                                       <a href="">洋洋后端呀！</a>
                                       <img src="../../assets/img/vipNew.png" height="40" width="36"/>
                                       <img src="../../assets/img/expertNew.png" height="40" width="36"/>
                                       <div class="zan">
                                           获得2999赞
                                       </div>
                                   </div>
                                   <div class="zhibiao">
                                       <span class="el-icon-top"></span>
                                       <span>499'</span>
                                       <p>综合指标</p>
                                   </div>
                               </div>
                           </div>
                       </el-tab-pane>
                   </el-tabs>
               </div>
           </div>
       </div>

       <foot></foot>
   </div>
</template>

<script>
    // browseNum:'',
    //     collectionNum:'',
    //     id:'',
    //     text:'',
    //     upNum:'',
    //     userId:'',
    //     time:''
    import foot from "../../components/common/foot"
    import {request} from '../../network/request'
    export default {
        name: "blog",
        data() {
            return {
                activeName: 'second',
                blog: []
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            lookBlog(id){
                request({
                    url:"/searchBlogById",
                    method: "post",
                    params:{
                        id: id
                    }
                }).then(res=>{
                    console.log(res.data);
                    sessionStorage.setItem('blog', res.data.text);
                    sessionStorage.setItem('blogTitle', res.data.title);
                    this.$router.push('/lookBlog');

                }).catch(err=>{
                    console.log(err);
                });


            }
        },
        components: {
            foot
        },
        created() {
            request({
                url:"/getBlogAll",
                method: "post",
                params:{

                }
            }).then(res=>{
                const ans = res.data;
                this.blog=ans;
            }).catch(err=>{
                console.log(err);
            });
        }
    }
</script>

<style scoped>
    .content{
        width: 100%;
        height: 100%;
        background: #f5f6f7 !important;
    }
    .body-inner{
        width: 640px;
        background: #fff;
        border-radius: 10px;
        height: 1000px;
        overflow: auto;
    }
    .box-blog{
        width: 1200px;
        margin: 0 auto;

    }
    ::-webkit-scrollbar {
        width:5px;

    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        border-radius:5px;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius:10px;
        background: #e8eaf1;
    }
    .img-head{
        margin-top: 20px;
    }
    .blog{
        width: 600px;
        height: 100px;
        overflow: hidden;
        padding: 20px;
        border-top: 1px solid #e8eaf1;


        transition: 1s;
    }
    .blog:hover{
        background-color: #f9f9f9;
    }
    .blog:last-child{
        border-bottom:  1px solid #e8eaf1;
    }
    .blog span{
        margin-bottom: 4px;
        color: #8a8a8a;
        font-size: 14px;
        line-height: 24px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        white-space: normal;
    }
    .blog a{
        max-width: 98%;
        color: #3d3d3d;
        display: block;
        line-height: 24px;
        height: 24px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-weight: bold;
    }
    .blog a:hover{
        color: #f40;
    }
    .ho span{
        cursor: pointer;
    }
    .ho span:hover{
        color: #f40 !important;
    }
    .up-blog{
        position: relative;
        border-bottom: 1px solid #e8eaf1;
        padding: 10px;
        margin-top: 5px;
    }
    .up-blog:last-child{
        border-bottom: none;
    }
    .up-blog .author{
        position: absolute;
        top: 8px;
    }
    .up-blog .author a{
        display: inline-block;
        margin-left: 60px;
        font-weight: bold;
        color: #3c3c3c;
    }
    .up-blog .author img{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;

    }
    .up-blog .author a:hover{
        color: #f40;
    }
    .up-blog .author .zan{
        position: absolute;
        left: 60px;
        height: 40px;
        font-size: 13px;
        color: #3c3c3c;
        line-height: 40px;
    }
    .zhibiao{
        display: inline-block;
        position: absolute;
        right: 10px;
    }
    .zhibiao span{

        height: 24px;
        text-align: right;
        font-size: 16px;
        font-weight: 600;
        color: #fc5531;
        line-height: 24px;
        position: relative;
        padding-right: 3px;
    }
    .zhibiao p{
        font-size: 12px;
        color: #999;
        line-height: 17px;
        text-align: right;
    }
</style>